---
{
	"title": "Menu",
	"language": "en",
	"category": "Plugins",
	"description": "Provides an interactive menu with optional sub-menus.",
	"tag": "menu",
	"parentdir": "menu",
	"altLangPrefix": "menu",
	"altMenu": "ajax/menu-include",
	"dateModified": "2017-06-12"
}
---
<span class="wb-prettify all-pre hide"></span>

<section>
	<h2>Purpose</h2>
	<p>Provides an interactive menu with optional sub-menus.</p>
</section>

<section>
	<h2>Example</h2>
	<ul>
		<li><strong>Large screens:</strong> The menu is rendered in the header as a menu bar.</li>
		<li><strong>Small and medium screens:</strong> The menu is rendered as a side panel, triggered by a menu button in the header, and includes the secondary menu and the footer.</li>
	</ul>

	<section>
		<h3>Code</h3>
		<section>
			<h4>In-page HTML</h4>
			<pre><code>&lt;nav role=&quot;navigation&quot; id=&quot;wb-sm&quot; data-ajax-replace=&quot;ajax/menu-include-en.html&quot; data-trgt=&quot;mb-pnl&quot; class=&quot;wb-menu visible-md visible-lg&quot; typeof=&quot;SiteNavigationElement&quot;&gt;
	&lt;div class=&quot;container nvbar&quot;&gt;
		&lt;h2&gt;Topics menu&lt;/h2&gt;
		&lt;div class=&quot;row&quot;&gt;
			&lt;ul class=&quot;list-inline menu&quot;&gt;
				&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Section&#32;1&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Section&#32;2&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Section&#32;3&lt;/a&gt;&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/nav&gt;</code></pre>
		</section>

		<section>
			<h4>menu-include-en.html</h4>
			<pre><code>&lt;div class=&quot;pnl-strt container visible-md visible-lg nvbar&quot;&gt;
	&lt;h2&gt;Topics menu&lt;/h2&gt;
	&lt;div class=&quot;row&quot;&gt;
		&lt;ul class=&quot;list-inline menu&quot; role=&quot;menubar&quot;&gt;
			&lt;li&gt;&lt;a href=&quot;#lore&quot; class=&quot;item&quot;&gt;Section 1&lt;/a&gt;
				&lt;ul class=&quot;sm list-unstyled&quot; id=&quot;lore&quot; role=&quot;menu&quot;&gt;
					&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 1.1&lt;/a&gt;&lt;/li&gt;
					...
				&lt;/ul&gt;
			&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;#lor&quot; class=&quot;item&quot;&gt;Section 2&lt;/a&gt;
				&lt;ul class=&quot;sm list-unstyled&quot; id=&quot;lor&quot; role=&quot;menu&quot; &gt;
					&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 2.1&lt;/a&gt;&lt;/li&gt;
					...
					&lt;li class=&quot;slflnk&quot;&gt;&lt;a href=&quot;#&quot;&gt;Section 2 - More&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;#lorm&quot; class=&quot;item&quot;&gt;Section 3&lt;/a&gt;
				&lt;ul class=&quot;sm list-unstyled&quot; id=&quot;lorm&quot; role=&quot;menu&quot; &gt;
					&lt;li&gt;
						&lt;details&gt;
							&lt;summary&gt;Section 3.1&lt;/summary&gt;
							&lt;ul role=&quot;menu&quot;&gt;
								&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 3.1.1&lt;/a&gt;&lt;/li&gt;
								...
							&lt;/ul&gt;
						&lt;/details&gt;
					&lt;/li&gt;
					...
				&lt;/ul&gt;
			&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/div&gt;
&lt;/div&gt;</code></pre>
		</section>
	</section>
</section>
